<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>风险画像</title>
    <link rel="stylesheet" href="../src/css/modal.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/loading.css">
    <style>
        #myModal td {
            padding: 8px;
            line-height: 1.4em;
        }
    </style>
    <script>
        (function setPageScale(window, document) {
            function setBodyScale() {
                var zoom = (window.innerHeight / 1080).toFixed(3)
                if (document.body) {
                    document.body.style.transform = 'translate(-50%, -50%) scale(' + zoom + ')';
                } else {
                    document.addEventListener('DOMContentLoaded', setBodyScale)
                }
            }
            setBodyScale();
            // reset scale unit on page resize窗口改变时候重新设置缩放
            window.addEventListener('resize', setBodyScale)
            window.addEventListener('pageshow', function (e) {
                if (e.persisted) {
                    setBodyScale()
                }
            })
        }(window, document))
    </script>
    <!--[if lt IE 9]> 
         <script src="../src/js/html5shiv.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="wrapper">

        <!-- Modal 产品列表 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog" style="width:800px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">产品列表</h4>
                    </div>
                    <div class="modal-body">
                        <div class="a-table-list">
                            <table>
                                <colgroup>
                                    <col style="width:90px" />
                                    <col />
                                    <col />
                                    <col />
                                </colgroup>
                                <thead>
                                    <tr>
                                        <td>序号</td>
                                        <td>产品名称</td>
                                        <td>批准文号</td>
                                        <td>规格</td>
                                    </tr>
                                    </tr>
                                </thead>
                            </table>
                            <div class="scroll-content" style="max-height:290px;overflow-y: auto;overflow-x: hidden;">
                                <table>
                                    <colgroup>
                                        <col style="width:90px" />
                                        <col />
                                        <col />
                                        <col />
                                    </colgroup>

                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td class="">
                                                双价肾综合征出血热灭活疫苗（Vero细胞）

                                            </td>
                                            <td>国药准字<br />
                                                S20070020</td>
                                            <td>
                                                1.0ml/瓶
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td class="">
                                                双价肾综合征出血热灭活疫苗（Vero细胞）

                                            </td>
                                            <td>国药准字<br />
                                                S20070020</td>
                                            <td>
                                                1.0ml/瓶
                                            </td>
                                        </tr>

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- Modal 企业检查缺陷分析 -->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog" style="width:1384px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">企业检查缺陷分析</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-fxhx-box">
                            <div class="modal-fxhx-box-item">
                                <div class="a-tit">企业综合风险情况分析</div>
                                <div id="main-bar1" style="width: 100%;height:330px;"></div>
                            </div>
                            <div class="modal-fxhx-box-item">
                                <div class="a-tit">企业检查缺陷情况统计</div>
                                <div style="width: 100%;height:330px; position: relative;">
                                    <span class="special-tit"
                                        style="position: absolute;top:149px;left:50%;  transform: translateX(-50%);">严重缺陷</span>
                                    <div class="form-box" style="background: none;margin: 0;">
                                        <table>
                                            <tbody>
                                                <tr>
                                                    <th>时间：</th>
                                                    <td>
                                                        <input class="form-control" value="2019-09-01  2019-09-01"
                                                            type="text" />

                                                    </td>
                                                    <th>产品类别：</th>
                                                    <td>
                                                        <select class="form-control">
                                                            <option>1</option>
                                                            <option>2</option>
                                                            <option>3</option>
                                                            <option>4</option>
                                                            <option>5</option>
                                                        </select>
                                                    </td>

                                                </tr>
                                                <tr>
                                                    <th>企业：</th>
                                                    <td>
                                                        <input class="form-control" type="text" />

                                                    </td>
                                                    <th>区域：</th>
                                                    <td>
                                                        <select class="form-control">
                                                            <option>1</option>
                                                            <option>2</option>
                                                            <option>3</option>
                                                            <option>4</option>
                                                            <option>5</option>
                                                        </select>
                                                    </td>

                                                </tr>
                                                <tr>
                                                    <th colspan="4">
                                                        <button type="button" class="a-btn">
                                                            <span>提交</span>
                                                        </button>

                                                    </th>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div id="main-bar2" style="width: 100%; height: 170px;"></div>
                                </div>

                            </div>
                            <div class="modal-fxhx-box-item" style="position: relative">
                                <span class="special-tit"
                                    style="position: absolute;top:29px;left:50%;  transform: translateX(-50%);">主要缺陷</span>

                                <div id="main-bar3" style="width: 100%;height:100%"></div>
                            </div>
                            <div class="modal-fxhx-box-item" style="position: relative">
                                <span class="special-tit"
                                    style="position: absolute;top:29px;left:50%;  transform: translateX(-50%);">一般缺陷</span>
                                <div id="main-bar4" style="width: 100%;height:100%"></div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- Modal 企业抽样检测不合格项目分析 -->
        <div class="modal fade" id="myModal3">
            <div class="modal-dialog" style="width:704px;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">企业抽样检测不合格项目分析</h4>
                    </div>
                    <div class="modal-body">
                        <div class="modal-fxhx-box2">
                            <div class="modal-fxhx-box2-1">
                                <div class="a-tit">历年企业抽检不合格项目情况</div>
                                <div id="main-bar5" style="height: 266px;"></div>
                            </div>
                            <div class="modal-fxhx-box2-2">
                                <div class="a-tit">企业抽样检测不合格项目分析</div>
                                <div class="form-box" style="background: none;margin: 0;">
                                    <table>
                                        <tbody>
                                            <tr>
                                                <th>时间：</th>
                                                <td>
                                                    <input class="form-control" value="2019-09-01  2019-09-01"
                                                        type="text" />

                                                </td>
                                                <th>成品品种：</th>
                                                <td>
                                                    <select class="form-control">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select>
                                                </td>

                                            </tr>
                                            <tr>
                                                <th>企业：</th>
                                                <td>
                                                    <input class="form-control" type="text" />

                                                </td>
                                                <th></th>
                                                <td>
                                                    <!-- <select class="form-control">
                                                        <option>1</option>
                                                        <option>2</option>
                                                        <option>3</option>
                                                        <option>4</option>
                                                        <option>5</option>
                                                    </select> -->
                                                </td>

                                            </tr>
                                            <tr>
                                                <th colspan="4">
                                                    <button type="button" class="a-btn">
                                                        <span>提交</span>
                                                    </button>

                                                </th>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div id="main-pie1" style="height: 410px;"></div>

                            </div>

                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="global-content">
            <header class="header"> </header>
            <section class="main clearfix">
                <nav class="navs">
                    <div class="nav-item">
                        <a href="./ltcp.html" class="ltcp ">
                            <span class="badge">2</span>

                            流通产品
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./jyqy.html" class="jyqy on ">
                            <span class="badge">2</span>

                            经营企业
                        </a>
                    </div>
                    <div class="nav-item">
                        <a href="./qtxx.html" class="qtxx ">
                            <span class="badge">2</span>

                            其他信息
                        </a>
                    </div>

                </nav>
                <div class="content-box">
                    <div class="fxhx-wrapper">
                        <div class="a-tit">企业综合风险情况分析</div>
                        <span class="score">监测评分：97分</span>
                        <div class="fxhx-box-con clearfix">
                            <div class="fxhx-left">
                                <table>
                                    <colgroup>

                                        <col style="width:260px;" />
                                        <col style="width:185px;" />
                                        <col style="width:172px;" />
                                        <col>

                                    </colgroup>
                                    <tbody>
                                        <tr>
                                            <td class="td-bg1">企业名称</td>
                                            <td class="center eli" colspan="3">XXX疫苗储配企业</td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg1">企业信息</td>
                                            <td class="td-bg2 eli">统一社会信用代码</td>
                                            <td colspan="2" class="eli">91330201728105235N</td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg1">法定代表人</td>
                                            <td class="td-bg2 eli">张欣</td>
                                            <td colspan="2" class="eli">GSP认证：CN20130188</td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg1">企业经营许可信息</td>
                                            <td class="td-bg2 eli">生产许可证</td>
                                            <td colspan="2" class="eli">浙200000208</td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg1">经营产品信息</td>
                                            <td class="td-bg2 eli">储配产品品种</td>
                                            <td colspan="2" class="eli">狂犬病疫苗，百日咳， <span data-toggle="modal"
                                                    data-target="#myModal" class="a-click-style">更多...</span>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td rowspan="12" class="td-bg1 ">企业风险分析</td>
                                            <td class="td-bg2">1、温湿度</td>
                                            <td class="td-bg2">是否正常</td>

                                            <td> <span class="a-click-style">是</span> </td>

                                        </tr>
                                        <tr>
                                            <td rowspan="3" class="td-bg2">2、GSP认证</td>
                                            <td class="td-bg2">严重缺陷</td>
                                            <td> <span class="a-click-style" data-toggle="modal"
                                                    data-target="#myModal2">1条</span> </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg2">主要缺陷</td>
                                            <td> <span class="a-click-style" data-toggle="modal"
                                                    data-target="#myModal2">1条</span> </td>
                                        </tr>

                                        <tr>
                                            <td class="td-bg2">一般缺陷</td>
                                            <td> <span class="a-click-style" data-toggle="modal"
                                                    data-target="#myModal2">1条</span> </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg2" rowspan="3">3、飞行检查</td>
                                            <td class="td-bg2">严重缺陷</td>
                                            <td> <span class="a-click-style" data-toggle="modal"
                                                    data-target="#myModal2">1条</span> </td>

                                        </tr>
                                        <tr>
                                            <td class="td-bg2">主要缺陷</td>
                                            <td> <span class="a-click-style" data-toggle="modal"
                                                    data-target="#myModal2">1条</span> </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg2">一般缺陷</td>
                                            <td> <span class="a-click-style" data-toggle="modal"
                                                    data-target="#myModal2">1条</span> </td>
                                        </tr>
                                        <tr>
                                            <td class="td-bg2" colspan="2">4、抽样检验</td>
                                            <td> <span class="a-click-style" data-toggle="modal"
                                                    data-target="#myModal3">1条</span> </td>

                                        </tr>
                                        <tr>
                                            <td class="td-bg2" colspan="2">5、不良反应</td>
                                            <td> <span class="a-click-style">1条</span> </td>

                                        </tr>
                                        <tr>
                                            <td class="td-bg2" colspan="2">6、企业信用</td>
                                            <td> <span class="a-click-style">1条</span> </td>

                                        </tr>
                                        <tr>
                                            <td class="td-bg2" colspan="2">7、经营异常</td>
                                            <td> <span class="a-click-style">1条</span> </td>

                                        </tr>
                                        <tr>
                                            <td class="td-bg2" colspan="2">8、经营异常</td>
                                            <td> <span class="a-click-style">1条</span> </td>

                                        </tr>

                                    </tbody>
                                </table>
                            </div>
                            <div class="fxhx-right">
                                <div class="a-tit" style="margin-top: 6px;">企业各风险分析维度占比</div>
                                <div id="radar" style="width: 100%;height: 700px;"></div>
                            </div>
                        </div>
                        <div class="bottom-btns">
                            <a href="javascript:;" class="btn-white-icon">
                                <img src="../src/img/qyhx/icon_stgz2.png" alt="">
                                <span>风险会商</span>
                            </a>
                            <a href="javascript:;" class="btn-white-icon">
                                <img src="../src/img/qyhx/icon_stgz3.png" alt="">
                                <span>风险处置</span>
                            </a>
                            <a href="javascript:;" class="btn-white-icon">
                                <img src="../src/img/qyhx/icon_stgz4.png" alt="">
                                <span>风险关闭</span>
                            </a>
                            <a href="javascript:window.history.go(-1);">
                                <img src="../src/img/back.png" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
    <script src="../src/js/jquery.3.3.1.js"></script>
    <script src="../src/js/modal.min.js"></script>
    <script src="../src/js/echarts.js"></script>
    <script src="../src/js/loading.js"></script>


    <script>
        $(function () {


            // 加载显示测试  不需要可删除

            function loading1() {
                $('body').loading({ //加载区域元素id或则类名元素名 可以上任何元素类名id
                    loadingWidth: 240,
                    title: '请稍等!',
                    name: 'test', //
                    discription: '正在努力加载中...',
                    direction: 'column',
                    type: 'origin',
                    // originBg:'#71EA71',
                    originDivWidth: 40,
                    originDivHeight: 40,
                    originWidth: 6,
                    originHeight: 6,
                    smallLoading: false,
                    // loadingMaskBg: 'rgba(0,0,0,0.2)',
                    titleColor: '#52fffd',
                    // loadingBg: '#312923',
                    loadingMaskBg: 'rgba(22,22,22,0.3)'
                });
                setTimeout(function () {
                    removeLoading('test');
                    // 关闭加载
                }, 500);
            }
            loading1()

            // shwoPie()
            // showmap()

            showRadar()
            $('#myModal2').on('shown.bs.modal', function (e) {
                chartBar1({
                    id: 'main-bar1',
                    lableList: ['设施与设备', '标准与验证', '收贷与验收', '储存与养护', '销售与出库', '运输与配送'],
                    legendData: ['2017年', '2018年', '2019年'],
                    dataList: [
                        [1, 20, 160, 1, 20, 160],
                        [2, 30, 60, 1, 20, 160],
                        [3, 60, 130, 1, 20, 160]

                    ]

                })
                chartBar2({
                    id: 'main-bar2',
                    special: true,
                    lableList: ['设施与设备', '标准与验证', '收贷与验收', '储存与养护', '销售与出库', '运输与配送'],
                    legendData: ['严重缺陷'],
                    color: ['#F8E71C'],
                    dataList: [
                        [1, 20, 160, 1, 20, 160],
                    ]


                })

                chartBar2({
                    id: 'main-bar3',
                    lableList: ['设施与设备', '标准与验证', '收贷与验收', '储存与养护', '销售与出库', '运输与配送'],
                    legendData: ['主要缺陷'],
                    color: ['#FF292A'],
                    dataList: [
                        [1, 20, 160, 1, 20, 160],
                    ]


                })
                chartBar2({
                    id: 'main-bar4',
                    lableList: ['设施与设备', '标准与验证', '收贷与验收', '储存与养护', '销售与出库', '运输与配送'],
                    legendData: ['一般缺陷'],
                    color: ['#10D35B'],
                    dataList: [
                        [1, 20, 160, 1, 20, 160],
                    ]


                })

            })

            $('#myModal3').on('shown.bs.modal', function (e) {
                chartBar1({
                    id: 'main-bar5',
                    lableList: ['水分', '效价', '装量', '鉴别', '无菌'],
                    legendData: ['2017年', '2018年', '2019年'],
                    dataList: [
                        [1, 20, 160, 1, 20],
                        [2, 30, 60, 1, 20],
                        [3, 60, 130, 1, 20]

                    ]

                })
                shwoPie()
            })


        })
        // 雷达图
        function showRadar() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('radar'));
            // 指定图表的配置项和数据
            var labels = ['日常检查', '温度湿度', '行政处罚', '投诉举报', '企业信用', '经营异常', '抽样检测'];
            var option = {
                tooltip: {
                    formatter: function (params) {
                        var results = '';
                        for (var i = 0; i < labels.length; i++) {
                            results += labels[i] + ':' + params.value[i] + '%<br>';
                        }
                        return results;
                    }
                },
                radar: {
                    splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                        show: true,
                        areaStyle: { // 分隔区域的样式设置。
                            color: ['rgba(14,49,145,1)',
                                'rgba(14,49,145,0)'
                            ], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                        }
                    },
                    axisLine: { //指向外圈文本的分隔线样式
                        lineStyle: {
                            color: '#153269'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#031448', // 分隔线颜色
                            width: 1, // 分隔线线宽
                        }
                    },
                    name: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        }
                    },
                    indicator: [{
                            name: '日常检查',
                            max: 100

                        },
                        {
                            name: '温度湿度',
                            max: 100
                        },
                        {
                            name: '行政处罚',
                            max: 100

                        },
                        {
                            name: '投诉举报',
                            max: 100

                        },
                        {
                            name: '企业信用',
                            max: 100

                        },
                        {
                            name: '经营异常',
                            max: 100

                        },
                        {
                            name: '抽样检测',
                            max: 100

                        }
                    ]
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: [100, 100, 80, 30, 6.9, 90, 23],
                    }, ],
                    itemStyle: {
                        normal: {
                            lineStyle: {
                                color: '#ED5A0D',
                                // shadowColor: '#4A99FF',
                                // shadowBlur: 10,
                            },
                            shadowColor: '#ED5A0D',
                            shadowBlur: 10,
                        },
                    },

                    areaStyle: {
                        normal: { // 单项区域填充样式
                            color: {
                                type: 'linear',
                                x: 0, //右
                                y: 0, //下
                                x2: 1, //左
                                y2: 1, //上
                                colorStops: [{
                                    offset: 0,
                                    color: '#ED5A0D'
                                }, {
                                    offset: 0.5,
                                    color: 'rgba(237,90,13,.2)'
                                }, {
                                    offset: 1,
                                    color: '#ED5A0D'
                                }],
                                globalCoord: false
                            },
                            opacity: 1 // 区域透明度
                        }
                    }
                }],
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }

        function shwoPie() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main-pie1'));
            // 指定图表的配置项和数据


            var option = {
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                // legend: {
                //     orient: 'vertical',
                //     right: 10,
                //     top: 122,
                //     data: ['疫苗', '血液制品', '生物工程产品', '大容量注射剂', '小容量注射剂', '小容量注射剂（含激素类）', '粉针剂', '冻干粉针剂', '原料药',
                //         '精神药品', '药品类易制毒化学品', '医疗用毒性药品', '中药饮片'
                //     ],
                //     textStyle: {
                //         fontSize: 16,
                //         color: '#fff'

                //     }
                // },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: '90%',
                    center: ['50%', '50%'],
                    color: ['#E89308', '#3243EE', '#FF292A', '#2EAA48', '#AF13FE', '#9233E7',
                        '#E12770', '#2289F2', '#FDFD64', '#98E33D', '#9C1919', '#6380C7', '#C36512'
                    ],
                    data: [{
                            value: 335,
                            name: '含量'
                        },
                        {
                            value: 310,
                            name: '无菌'
                        },
                        {
                            value: 234,
                            name: '性状'
                        },
                        {
                            value: 135,
                            name: '鉴别'
                        },
                        {
                            value: 1548,
                            name: '效价'
                        }

                    ],
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            formatter: "{b} \n{d}%",
                            textStyle: {
                                fontSize: 16
                            }
                        }

                    },
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            $(window).on('resize', function () {
                myChart.resize();

            })
        }

        function chartBar1(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据


            var option = {
                color: ['#B1D321', '#F5A623', '#2289F2', '#52FFFD', '#BCEB4D', '#F5A623', '#E75656', '#5C13FE',
                    '#669F2B', '#AA671D', '#2289F2', '#E82177'
                ],
                grid: {
                    left: 80,
                    top: 100,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '单位：个',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10,
                    top: 40
                },
                legend: {
                    data: cfg.legendData,
                    top: 30,
                    x: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: cfg.lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: cfg.dataList.map(function (item, index) {
                    var a = {
                        name: cfg.legendData[index],
                        type: 'bar',
                        data: cfg.dataList[index],
                        // symbol: 'circle', //

                    }
                    return a

                })

            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }

        function chartBar2(cfg) {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(cfg.id));
            // 指定图表的配置项和数据
            var option = {
                color: cfg.color,
                grid: {
                    left: 80,
                    top: cfg.special ? 30 : 80,
                    bottom: 40,
                    right: 40
                },
                title: {
                    text: '(单位：个)',
                    textStyle: {
                        color: '#fff',
                        fontSize: 16
                    },
                    left: 10,
                    top: cfg.special ? 0 : 40,
                },
                legend: {
                    data: cfg.legendData,
                    show: false,
                    top: 30,
                    x: 'center',
                    textStyle: {
                        fontSize: 16,
                        color: '#fff'
                    }
                },

                xAxis: {
                    type: 'category',
                    data: cfg.lableList,
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        interval: 0, //保证所有横向坐标数据全展示不隐藏
                        margin: 10 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {

                        show: true, //不显示y轴
                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //纵向网格线
                        lineStyle: {
                            color: ['#013CD9']
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        inside: false,
                        textStyle: {
                            color: '#fff',
                            fontSize: 16
                        },
                        // interval: 0,
                        margin: 20 //刻度与坐标轴距离
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    axisLine: {
                        show: true, //不显示y轴

                        symbolOffset: [0, 14],
                        lineStyle: {
                            color: '#013CD9'
                        }
                    },
                    splitLine: {
                        show: false, //横向网格线
                        lineStyle: {
                            color: ['#334c69']
                        }
                    },
                    splitArea: {
                        show: true, //横向网格区域
                        areaStyle: {
                            color: ['rgba(0, 70, 255, 0.1)', 'rgba(5,39,75,0)']
                        }
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 横坐标指示器
                        type: 'line',
                        lineStyle: {
                            color: 'rgba(0,0,0,0)'
                        }
                    },
                    // alwaysShowContent: true, //悬浮后一直显示
                    // 自定义悬浮提示框内容（数据处理后加单位）
                    backgroundColor: 'rgba(0,0,0,0)',
                    // formatter(params) { // params的个数等于折线的条数（对多条折线数据进行加单位，就需要遍历）
                    //     var relVal =
                    //         '<div class="bg_2_tip" style="text-align:left;padding:20px 30px;font-size:14px "><span style="color:#fff;font-size:20px;">' +
                    //         params[0].name + '</span>' + (params[0] ? '<br><span class="color-blue-2">' + params[0]
                    //             .seriesName + '<span class="color-yellow-2 f20 pl10">' + params[0].value +
                    //             '</span>亿元</span>' : '') + '' + (params[1] ? '<br><span class="color-blue-2">' +
                    //             params[1].seriesName + '<span class="color-yellow-2 f20 pl10">' + params[1].value +
                    //             '</span>亿元</span>' : '') + '</div>'
                    //     return relVal
                    // }
                },
                series: cfg.dataList.map(function (item, index) {
                    var a = {
                        name: cfg.legendData[index],
                        type: 'bar',
                        barWidth: 32,
                        label: {
                            show: true,
                            position: 'top'
                        },
                        data: cfg.dataList[index],
                        // symbol: 'circle', //

                    }
                    return a

                })

            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


        }
    </script>

</body>

</html>